<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ReqModel</title>
    <link rel="stylesheet" type="text/css" th:href="@{/element/css/element-ui.css}"/>
</head>

<body>

<div id="app">
    <el-row>
        <el-button @click="add" type="success" icon="el-icon-plus" circle></el-button>
        <el-button @click="edit" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button @click="deletereqs" type="danger" icon="el-icon-delete" circle></el-button>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="info" icon="el-icon-download" circle></el-button>
        <el-button type="warning" icon="el-icon-upload2" circle></el-button>

    </el-row>


    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100% ;margin-top:10px;"
            @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column header-align="center" align="center" prop="id"  label="ID"></el-table-column>
        <el-table-column header-align="center" align="center" prop="reqCode" label="请求编号"></el-table-column>
        <el-table-column header-align="center" align="center" prop="reqName" label="请求名称"></el-table-column>
        <el-table-column header-align="center" align="center" prop="reqCategoryId" label="请求分类"></el-table-column>
        <el-table-column header-align="center" align="center" prop="reqDesc" label="请求描述"></el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>



    <el-pagination style="float:right;margin-top:5px;" @size-change="pageSizeChange" @current-change="pageIndexChange" :current-page="pageIndex"
                   :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <el-dialog :title="titleMap" :visible.sync="dialogFormVisible">
    <el-form :width="800" ref="form" :model="form" label-width="80px">

        <el-form-item label="请求编号">
            <el-input v-model="form.reqCode"></el-input>
        </el-form-item>
        <el-form-item label="请求名称">
            <el-input v-model="form.reqName"></el-input>
        </el-form-item>
        <el-form-item label="请求分类">
            <el-input v-model="form.reqCategoryId"></el-input>
        </el-form-item>
        <el-form-item label="请求描述">
            <el-input v-model="form.reqDesc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :disabled="repeatBtn" @click="saveRequest" v-if="titleMap=='新增请求'">立即创建</el-button>
            <el-button type="primary" :disabled="repeatBtn" @click="mergeRequest" v-if="titleMap=='编辑请求'">编辑请求</el-button>
            <el-button @click="dialogFormVisible=false">取消</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>

</div>
<script th:src="@{/js/jquery-3.1.0.min.js}" type="text/javascript"></script>
<script th:src="@{/element/js/vue.js}" type="text/javascript"></script>
<script th:src="@{/element/js/element-ui.js}" type="text/javascript"></script>

<script th:inline="javascript">



    var app = new Vue({
        el: '#app',
        data: {
            dialogFormVisible:false,
            form: {
                id:'',
                reqName: '',
                reqCategoryId: '',
                reqCode: '',
                reqDesc: ''
            },
            titleMap: '',
            //新增和编辑弹框标题
            dialogStatus: "",
            repeatBtn:false,
            // 表格数据集合，从服务端获取
            tableData: [],
            multipleSelection: [],
            // 分页计数器，第几页
            pageIndex:1,
            // 分页计数器, 每页多少条
            pageSize:10,
            // 总条数
            total:0,
        },
        mounted:function(){
           this.getList();
        },
        created:function(){

        },
        methods:{
            getList:function(){
                var _this=this;
                $.get("/get-requestList?pageIndex="+_this.pageIndex+"&&pageSize="+_this.pageSize,function(resp){
                    _this.tableData=resp.list;
                    _this.total=resp.total;
                });
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            pageSizeChange:function(val){
                this.pageSize=val;
                this.getList();
            },
            pageIndexChange:function(val){
                this.pageIndex=val;
                this.getList();
            },
            add:function(){
                this.dialogFormVisible=true;
                this.dialogStatus = "addRequest";
                this.titleMap="新增请求";
                this.form.reqName="";
                this.form.reqCategoryId='';
                this.form.reqDesc='';
                this.form.reqCode='';

            },
            edit:function(row){

                this.dialogFormVisible=true;
                this.dialogStatus = "editRequest";
                this.titleMap="编辑请求";
                this.form.reqName= row.reqName;
                this.form.reqName=row.reqName;
                this.form.reqCategoryId=row.reqCategoryId;
                this.form.reqDesc=row.reqDesc;
                this.form.reqCode=row.reqCode;
                this.form.id=row.id;
            },

            deletereqs:function() {
                let ids = [];

                this.multipleSelection.forEach((row)=>{
                    ids.push(row.id);
                });
                console.log(ids);

                this.$confirm('确定删除吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const _this=this;
                    $.ajax({
                        type: 'POST',
                        url: '/request/delete-request',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(ids),
                        dataType: 'json',
                        success(response) {

                            _this.getList();
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }
                    });


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            mergeRequest:function(){
                const _this=this;
                _this.repeatBtn=true;

                $.ajax({
                    type: 'POST',
                    url: '/request/merge-request',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(_this.form),
                    dataType: 'json',
                    success(response) {
                        _this.repeatBtn=false;
                        _this.dialogFormVisible = false;
                        _this.getList();
                        _this.$message({
                            message: '请求编辑成功！',
                            type: 'success'
                        });

                    }
                });
            },
            saveRequest:function () {
                const _this=this;
                _this.repeatBtn=true;

                $.ajax({
                    type: 'POST',
                    url: '/request/save-request',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(_this.form),
                    dataType: 'json',
                    success(response) {
                        _this.repeatBtn=false;
                        _this.dialogFormVisible = false;
                            _this.getList();
                            _this.$message({
                                message: '请求新增成功！',
                                type: 'success'
                            });

                    }
                });
            }
        }
    })

</script>

</body>
</html>
